<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 300px;
            height: 300px;
            /* background-color: hotpink; */
            border: 1px solid black;
        }
    </style>
</head>

<body>
    <div class="box"></div>
    <script>
        const oBox = document.querySelector('.box')

        // 节流的核心代码


        // function enterHandle(){
        //     console.log(111);
        //     oBox.style.background='hotpink'
        // }

        // function leaveHandle(){
        //     console.log(222);
        //   oBox.style.background=''
        // }

        // oBox.onmouseenter = throttle (enterHandle,300);
        // oBox.onmouseleave = throttle (leaveHandle,300);

        // function throttle(fn,time){
        //     let lastTime = 0;
        //     return function (){
        //         let nowTime = Date.now();
        //         if(nowTime - lastTime <time){
        //             return;
        //         }
        //         lastTime = nowTime;

        //         fn();
        //     } 
        // }



        // 节流

        // 节流核心代码
        function center() {
            console.log('center');
        }

        oBox.onmousemove = throttle(center, 300)

        function throttle(fn, time) {
            let startTime = 0
            return () => {
                let nowTime = Date.now()
                // 节流实际逻辑 在给定时间之内不会执行核心代码 超过了给定时间才会执行核心代码
                if (nowTime - startTime < time) {
                    return
                }
                startTime = nowTime
                fn()
            }
        }
    </script>
</body>

</html>